<template>
	<view class="o-emoji">
		<scroll-view style="max-height: 278px;padding: 20rpx 0 30rpx;" scroll-y>
			<view class="emoji-list">
				<image mode="aspectFit" @click="$emit('diceSend')"
					src="@/static/dice-tag/1.png" />
				<image v-for="(item, index) in emojis" :key="index" mode="aspectFit" @click="clickEmoji(item)" 
					:src="item.src" />
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		name: "o-emoji",
		data() {
			return {
			};
		},
		computed: {
			...mapState({
				emojis: state => state.common.emojis,
			}),
		},
		async mounted() {
		},
		methods: {
			clickEmoji(emoji) {
				this.$emit("click", emoji);
			}
		}
	};
</script>

<style lang='scss' scoped>
	.o-emoji {
		.emoji-list {
			display: flex;
			flex-wrap: wrap;
			gap: 20rpx;
			image {
				width: 70rpx;
				height: 70rpx;
				display: block;
			}
		}
	}
</style>